<template>
	<section class="content-box">
		<div>
		<!--工具条-->
		<el-col class="toolbar">
			<el-col :span="13" style="text-align: center;">
				<h2>利润表</h2>
			</el-col>
		</el-col>
		<el-col class="toolbar">
			<el-col :span="24">
				<span>期间：</span>
				<el-select v-model="Period" @change='chaRes()' placeholder="请选择">
					<el-option v-for="item in Period_Date" :key="item.ID" :label="item.Name" :value="item.Code">
					</el-option>
				</el-select>&#12288;&#12288;
				<a class="wml"  @click="export2Excel">导出</a>
			</el-col>
		</el-col>
		<!--列表-->
		<el-table :data="tableData" max-height="700" border highlight-current-row  style="width: 56.3%" v-loading="loading" element-loading-text="正在加载中">
			<el-table-column prop="RI_Title" label="项目"  width="600" header-align="center">
			</el-table-column>
			<el-table-column prop="RD_Value1" label="本期金额" :formatter="dealF" align="right" header-align="center"  width="150">
			</el-table-column>
			<el-table-column prop="RD_Value2" label="本年累计" :formatter="dealF" align="right" header-align="center"  width="150">
			</el-table-column>
		</el-table>
		</div>
	</section>
</template>

<script>
	import axios from "../../../util/axios";
	export default {
		name: "profit",
		data() {
			return {
				loading: true, //显示loading
				tableData: [], //数据列表
				Period: "", //默认第一个
				Period_Date: [], //日期集合
				newDa: "",
				isdown:'',
			};
		},
		methods: {
			chaRes: function() {
				this.newDa = this.Period;
				console.log(this.newDa);
				this.Incomdata();
			},

			Incomdata() {
				//请求数据
				axios
					.post("getGetIncome", {
						sPeriod: this.newDa,
						sLevel: 0
					})
					.then(data => {
						this.tableData = data;
						// this.daochu()
						setTimeout(() => {
							this.loading = false;
						}, 500);
					})
					.catch(err => {
						console.log(err);
					});
			},
			menban() {
				setTimeout(() => {
					this.loading = true;
				}, 500);
			},
			Fu_GetPeriodList(){
				axios
				.post('Fu_GetPeriodList')
				.then(res => {
					console.log(res);
					this.Period_Date = res;
					for(let i = 0 ; i < res.length ; i++){
						if(res[i].IsCurrent ==1){
							this.Period = res[i].Code
						}
					}
				
				})
				.catch(err => {
					console.log(err);
				})
				
			},
			daochu(){
				axios
					.post('IExportData',
					{
		                sPeriod: this.newDa,
						sLevel: 0
		            })
					.then(res=>{
			                console.log(res)
			                //		                this.isdown = "http://192.168.1.169:8098"+res;
		                this.isdown = "http://www.zixun020.com/sccw"+res;
			                console.log(this.isdown)		                
			            })
					.catch(err => {
			                console.log(err);
			            })
			},
			// tishi(){
			// 	this.$message({
			// 		message: "下载中",
			// 		type: 'success'
			// 	});
			// },
			export2Excel() {//导出功能
			　　require.ensure([], () => {
			　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel');
			　　　　const tHeader = ['项目', '本期金额', '本年累计'];
			　　　　const filterVal = ['RI_Title', 'RD_Value1', 'RD_Value2'];
			　　　　const list = this.tableData;
			　　　　const data = this.formatJson(filterVal, list);
			　　　　export_json_to_excel(tHeader, data, '利润表excel');
			　　})
			},
			formatJson(filterVal, jsonData) {//导出功能
			　　return jsonData.map(v => filterVal.map(j => v[j]))
			},
			dealF(e,cell,cellValue) {
				console.log("1111111",cellValue)
				if(cellValue == 0){
					return ''
				}else{
					return cellValue
				}	   
			},
		},
		created() {
			this.Fu_GetPeriodList();
		},
		watch: {
			'Period': "menban"
		},
		mounted() {}
	};
</script>

<style scoped lang="scss">
	@import "../../../common/css/index.css";
	.toolbar {
		h2 {
			font-weight: 100;
			margin: 0 auto;
		}
	}
	.wml{
		color: #fff;
	    background-color: #20a0ff;
	    border-color: #20a0ff;
	    font-size: 14px;
	    box-sizing: border-box;
	    padding: 10px 15px;
	    border-radius: 4px;
	    margin-left: 11px;
	}
</style>